Asynchrone Generatorfunktionen: Die asynchrone Iterationsprotokolle meistern

Asynchrone Programmierung ist ein Eckpfeiler der modernen JavaScript-Entwicklung, insbesondere beim Umgang mit E/A-Operationen wie dem Abrufen von Daten von APIs, dem Lesen von Dateien oder der Interaktion mit Datenbanken. Traditionell haben wir uns auf Promises und async/await verlassen, um diese asynchronen Aufgaben zu verwalten. Asynchrone Generatorfunktionen bieten jedoch eine leistungsstarke und elegante Möglichkeit, die asynchrone Iteration zu verarbeiten, sodass wir Datenströme asynchron und effizient verarbeiten können.

Asynchrone Iterationsprotokolle verstehen

Bevor wir uns mit asynchronen Generatorfunktionen befassen, ist es wichtig, die asynchronen Iterationsprotokolle zu verstehen, auf denen sie aufbauen. Diese Protokolle definieren, wie asynchrone Datenquellen auf kontrollierte und vorhersagbare Weise iteriert werden können.

Das asynchrone Iterable-Protokoll

Das asynchrone Iterable-Protokoll definiert ein Objekt, das asynchron iteriert werden kann. Ein Objekt entspricht diesem Protokoll, wenn es eine Methode mit dem Schlüssel Symbol.asyncIterator hat, die einen asynchronen Iterator zurückgibt.

Stellen Sie sich ein Iterable wie eine Wiedergabeliste von Liedern vor. Das asynchrone Iterable ist wie eine Wiedergabeliste, bei der jedes Lied (asynchron) geladen werden muss, bevor es abgespielt werden kann.

Beispiel:

            const asyncIterable = {
  [Symbol.asyncIterator]() {
    return {
      next() {
        // Asynchron den nächsten Wert abrufen
      }
    };
  }
};

            

              
                Copy
              
            
          

Das asynchrone Iterator-Protokoll

Das asynchrone Iterator-Protokoll definiert die Methoden, die ein asynchroner Iterator implementieren muss. Ein Objekt, das diesem Protokoll entspricht, muss eine next()-Methode und optional die Methoden return() und throw() haben.

• next(): Diese Methode gibt ein Promise zurück, das in ein Objekt mit zwei Eigenschaften aufgelöst wird: value und done. value enthält den nächsten Wert in der Sequenz, und done ist ein boolescher Wert, der angibt, ob die Iteration abgeschlossen ist.
• return(): (Optional) Diese Methode gibt ein Promise zurück, das in ein Objekt mit den Eigenschaften value und done aufgelöst wird. Es signalisiert, dass der Iterator geschlossen wird. Dies ist nützlich, um Ressourcen freizugeben.
• throw(): (Optional) Diese Methode gibt ein Promise zurück, das mit einem Fehler abgelehnt wird. Es wird verwendet, um zu signalisieren, dass während der Iteration ein Fehler aufgetreten ist.

Beispiel:

            const asyncIterator = {
  next() {
    return new Promise((resolve) => {
      // Asynchron den nächsten Wert abrufen
      setTimeout(() => {
        resolve({ value: /* irgendein Wert */, done: false });
      }, 100);
    });
  },
  return() {
    return Promise.resolve({ value: undefined, done: true });
  },
  throw(error) {
    return Promise.reject(error);
  }
};

            

              
                Copy
              
            
          

Einführung in asynchrone Generatorfunktionen

Asynchrone Generatorfunktionen bieten eine bequemere und lesbarere Möglichkeit, asynchrone Iteratoren und Iterables zu erstellen. Sie kombinieren die Leistungsfähigkeit von Generatoren mit der Asynchronität von Promises.

Syntax

Eine asynchrone Generatorfunktion wird mit der Syntax async function* deklariert:

            async function* myAsyncGenerator() {
  // Asynchrone Operationen und Yield-Anweisungen hier
}

            

              
                Copy
              
            
          

Das yield-Schlüsselwort

Innerhalb einer asynchronen Generatorfunktion wird das Schlüsselwort yield verwendet, um Werte asynchron zu erzeugen. Jede yield-Anweisung pausiert effektiv die Ausführung der Generatorfunktion, bis das yielded Promise aufgelöst wird.

Beispiel:

            async function* fetchUsers() {
  const user1 = await fetch('https://example.com/api/users/1').then(res => res.json());
  yield user1;

  const user2 = await fetch('https://example.com/api/users/2').then(res => res.json());
  yield user2;

  const user3 = await fetch('https://example.com/api/users/3').then(res => res.json());
  yield user3;
}

            

              
                Copy
              
            
          

Asynchrone Generatoren mit for await...of konsumieren

Sie können über die von einer asynchronen Generatorfunktion erzeugten Werte mithilfe der for await...of-Schleife iterieren. Diese Schleife verarbeitet automatisch die asynchrone Auflösung von Promises, die vom Generator yielded werden.

Beispiel:

            async function main() {
  for await (const user of fetchUsers()) {
    console.log(user);
  }
}

main();

            

              
                Copy
              
            
          

Praktische Anwendungsfälle für asynchrone Generatorfunktionen

Asynchrone Generatorfunktionen zeichnen sich in Szenarien mit asynchronen Datenströmen aus, wie z. B.:

1. Streaming von Daten von APIs

Stellen Sie sich vor, Sie rufen einen großen Datensatz von einer API ab, die Paginierung unterstützt. Anstatt den gesamten Datensatz auf einmal abzurufen, können Sie eine asynchrone Generatorfunktion verwenden, um Seiten mit Daten inkrementell abzurufen und zu yielden.

Beispiel (Abrufen paginierter Daten):

            async function* fetchPaginatedData(url, pageSize = 10) {
  let page = 1;

  while (true) {
    const response = await fetch(`${url}?page=${page}&pageSize=${pageSize}`);
    const data = await response.json();

    if (data.length === 0) {
      return; // Keine Daten mehr
    }

    for (const item of data) {
      yield item;
    }

    page++;
  }
}

async function main() {
  for await (const item of fetchPaginatedData('https://api.example.com/data')) {
    console.log(item);
  }
}

main();

            

              
                Copy
              
            
          

Internationales Beispiel (API für Währungsumrechnungskurse):

            async function* fetchExchangeRates(currencyPair, startDate, endDate) {
  let currentDate = new Date(startDate);

  while (currentDate <= new Date(endDate)) {
    const dateString = currentDate.toISOString().split('T')[0]; // YYYY-MM-DD
    const url = `https://api.exchangerate.host/${dateString}?base=${currencyPair.substring(0,3)}&symbols=${currencyPair.substring(3,6)}`;
    try {
      const response = await fetch(url);
      const data = await response.json();

      if (data.success) {
        yield {
          date: dateString,
          rate: data.rates[currencyPair.substring(3,6)],
        };
      }

    } catch (error) {
      console.error(`Fehler beim Abrufen von Daten für ${dateString}:`, error);
      // Sie können Fehler möglicherweise anders behandeln, z. B. wiederholen oder das Datum überspringen.
    }

    currentDate.setDate(currentDate.getDate() + 1);
  }
}

async function main() {
  const currencyPair = 'EURUSD';
  const startDate = '2023-01-01';
  const endDate = '2023-01-10';

  for await (const rate of fetchExchangeRates(currencyPair, startDate, endDate)) {
    console.log(rate);
  }
}

main();

            

              
                Copy
              
            
          

Dieses Beispiel ruft die täglichen EUR-zu-USD-Wechselkurse für einen bestimmten Datumsbereich ab. Es behandelt potenzielle Fehler bei API-Aufrufen. Denken Sie daran, `https://api.exchangerate.host` durch einen zuverlässigen und geeigneten API-Endpunkt zu ersetzen.

2. Verarbeitung großer Dateien

Beim Arbeiten mit großen Dateien kann das Lesen der gesamten Datei in den Speicher ineffizient sein. Asynchrone Generatorfunktionen ermöglichen es Ihnen, die Datei Zeile für Zeile oder in Blöcken zu lesen und jeden Block asynchron zu verarbeiten.

Beispiel (Lesen einer großen Datei Zeile für Zeile - Node.js):

            const fs = require('fs');
const readline = require('readline');

async function* readLines(filePath) {
  const fileStream = fs.createReadStream(filePath);

  const rl = readline.createInterface({
    input: fileStream,
    crlfDelay: Infinity
  });

  for await (const line of rl) {
    yield line;
  }
}

async function main() {
  for await (const line of readLines('large_file.txt')) {
    // Verarbeiten Sie jede Zeile asynchron
    console.log(line);
  }
}

main();

            

              
                Copy
              
            
          

Dieses Node.js-Beispiel zeigt das zeilenweise Lesen einer Datei mit fs.createReadStream und readline.createInterface. Die asynchrone Generatorfunktion readLines yielded jede Zeile asynchron.

3. Behandlung von Echtzeit-Datenströmen (WebSockets, Server-Sent Events)

Asynchrone Generatorfunktionen eignen sich gut für die Verarbeitung von Echtzeit-Datenströmen aus Quellen wie WebSockets oder Server-Sent Events (SSE). Sie können Daten kontinuierlich yielden, sobald sie aus dem Stream eintreffen.

Beispiel (Verarbeitung von Daten aus einem WebSocket - Konzeptionell):

            // Dies ist ein konzeptionelles Beispiel und erfordert eine WebSocket-Bibliothek wie 'ws' (Node.js) oder die integrierte WebSocket-API des Browsers.

async function* processWebSocketStream(url) {
  const websocket = new WebSocket(url);

  websocket.onmessage = (event) => {
    //Dies muss außerhalb des Generators behandelt werden.
    //Normalerweise würden Sie die event.data in eine Warteschlange einreihen
    //und der Generator würde asynchron aus der Warteschlange ziehen
    //über ein Promise, das aufgelöst wird, wenn Daten verfügbar sind.
  };
  websocket.onerror = (error) => {
     //Fehler behandeln.
  };
  websocket.onclose = () => {
    //Schließen behandeln.
  }

  //Das eigentliche Yielding und Warteschlangenmanagement würde hier stattfinden,
  //unter Verwendung von Promises zur Synchronisierung zwischen dem websocket.onmessage
  //Ereignis und der asynchronen Generatorfunktion.
  //Dies ist eine vereinfachte Darstellung.

  //while(true){ //Verwenden Sie dies, wenn Sie Ereignisse ordnungsgemäß in die Warteschlange stellen.
  //  const data = await new Promise((resolve) => {
  //   // Lösen Sie das Promise auf, wenn Daten in der Warteschlange verfügbar sind.
  //  })
  //  yield data
  //}

}

async function main() {
  // for await (const message of processWebSocketStream('wss://example.com/ws')) {
  //   console.log(message);
  // }
  console.log("WebSocket-Beispiel - nur konzeptionell. Weitere Informationen finden Sie in den Kommentaren im Code.");
}

main();

            

              
                Copy
              
            
          

Wichtige Hinweise zum WebSocket-Beispiel:

• Das bereitgestellte WebSocket-Beispiel ist hauptsächlich konzeptionell, da die direkte Integration der ereignisgesteuerten Natur von WebSocket in asynchrone Generatoren eine sorgfältige Synchronisierung mithilfe von Promises und Warteschlangen erfordert.
• Echte Implementierungen beinhalten normalerweise das Puffern eingehender WebSocket-Nachrichten in einer Warteschlange und die Verwendung eines Promise, um dem asynchronen Generator zu signalisieren, wenn neue Daten verfügbar sind. Dies stellt sicher, dass der Generator nicht blockiert wird, während er auf Daten wartet.

4. Implementieren benutzerdefinierter asynchroner Iteratoren

Asynchrone Generatorfunktionen erleichtern das Erstellen benutzerdefinierter asynchroner Iteratoren für jede asynchrone Datenquelle. Sie können Ihre eigene Logik zum Abrufen, Verarbeiten und Yielden von Werten definieren.

Beispiel (Asynchrones Generieren einer Zahlenfolge):

            async function* generateNumbers(start, end, delay) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, delay));
    yield i;
  }
}

async function main() {
  for await (const number of generateNumbers(1, 5, 500)) {
    console.log(number);
  }
}

main();

            

              
                Copy
              
            
          

Dieses Beispiel generiert eine Folge von Zahlen von start bis end mit einer angegebenen delay zwischen den einzelnen Zahlen. Die Zeile await new Promise(resolve => setTimeout(resolve, delay)) führt eine asynchrone Verzögerung ein.

Fehlerbehandlung

Die Fehlerbehandlung ist entscheidend beim Arbeiten mit asynchronen Generatorfunktionen. Sie können try...catch-Blöcke innerhalb der Generatorfunktion verwenden, um Fehler zu behandeln, die während asynchroner Operationen auftreten.

Beispiel (Fehlerbehandlung in einem asynchronen Generator):

            async function* fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    yield data;
  } catch (error) {
    console.error('Fehler beim Abrufen von Daten:', error);
    // Sie können wählen, ob Sie den Fehler erneut auslösen, einen Standardwert yielden oder die Iteration beenden möchten.
    // Zum Beispiel, yield { error: error.message };
    throw error;
  }
}

async function main() {
  try {
    for await (const data of fetchData('https://example.com/api/invalid')) {
      console.log(data);
    }
  } catch (error) {
    console.error('Fehler während der Iteration:', error);
  }
}

main();

            

              
                Copy
              
            
          

Dieses Beispiel zeigt, wie Fehler behandelt werden, die während der fetch-Operation auftreten können. Der try...catch-Block fängt alle Fehler ab und protokolliert sie in der Konsole. Sie können den Fehler auch erneut auslösen, damit er vom Konsumenten des Generators abgefangen wird, oder ein Fehlerobjekt yielden.

Vorteile der Verwendung asynchroner Generatorfunktionen

• Verbesserte Code-Lesbarkeit: Asynchrone Generatorfunktionen machen asynchronen Iterationscode lesbarer und wartbarer als herkömmliche Promise-basierte Ansätze.
• Vereinfachter asynchroner Kontrollfluss: Sie bieten eine natürlichere und sequenzielle Möglichkeit, asynchrone Logik auszudrücken, wodurch es einfacher wird, darüber nachzudenken.
• Effizientes Ressourcenmanagement: Sie ermöglichen es Ihnen, Daten in Blöcken oder Strömen zu verarbeiten, wodurch der Speicherverbrauch reduziert und die Leistung verbessert wird, insbesondere beim Umgang mit großen Datensätzen oder Echtzeit-Datenströmen.
• Klare Trennung der Zuständigkeiten: Sie trennen die Logik zum Generieren von Daten von der Logik zum Konsumieren von Daten und fördern so Modularität und Wiederverwendbarkeit.

Vergleich mit anderen asynchronen Ansätzen

Asynchrone Generatoren vs. Promises

Während Promises grundlegend für asynchrone Operationen sind, eignen sie sich weniger für die Behandlung von Sequenzen asynchroner Werte. Asynchrone Generatoren bieten eine strukturiertere und effizientere Möglichkeit, asynchrone Datenströme zu iterieren.

Asynchrone Generatoren vs. RxJS Observables

RxJS Observables sind ein weiteres leistungsstarkes Werkzeug für die Behandlung asynchroner Datenströme. Observables bieten erweiterte Funktionen wie Operatoren zum Transformieren, Filtern und Kombinieren von Datenströmen. Asynchrone Generatoren sind jedoch oft einfacher zu verwenden für grundlegende asynchrone Iterationsszenarien.

Browser- und Node.js-Kompatibilität

Asynchrone Generatorfunktionen werden in modernen Browsern und Node.js weitgehend unterstützt. Sie sind in allen wichtigen Browsern verfügbar, die ES2018 (ECMAScript 2018) und Node.js Versionen 10 und höher unterstützen.

Sie können Tools wie Babel verwenden, um Ihren Code in ältere JavaScript-Versionen zu transpilieren, wenn Sie ältere Umgebungen unterstützen müssen.

Fazit

Asynchrone Generatorfunktionen sind eine wertvolle Ergänzung des JavaScript-Toolkits für asynchrone Programmierung. Sie bieten eine leistungsstarke und elegante Möglichkeit, die asynchrone Iteration zu verarbeiten, wodurch es einfacher wird, Datenströme effizient und wartbar zu verarbeiten. Indem Sie die asynchronen Iterationsprotokolle und die Syntax asynchroner Generatorfunktionen verstehen, können Sie deren Vorteile in einer Vielzahl von Anwendungen nutzen, vom Streaming von Daten von APIs über die Verarbeitung großer Dateien bis hin zur Behandlung von Echtzeit-Datenströmen.

Weiteres Lernen

• MDN Web Docs: AsyncGeneratorFunction
• Exploring ES2018: Asynchronous Iteration
• Node.js Documentation: Konsultieren Sie die offizielle Node.js-Dokumentation für Streams und Dateisystemoperationen.